<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>博客列表</title>
  <link rel="stylesheet" href="./static/css/add.css">
</head>

<body>
  <div class="content">
    <h1>新增博客</h1>
    <table>
      <tr>
        <th>姓名</th>
        <th>地址</th>
      </tr>

      <tbody class="blogList">
        <tr>
          <td><input id="blogName" type="text" placeholder="请输入姓名"></td>
          <td><input id="blogAddress" type="text" placeholder="请输入地址"></td>
        </tr>
        <tr>
          <td><input type="button" value="保存" onclick="add()"></td>
          <td><input type="button" value="取消" onclick="cancel()"></td>
        </tr>
      </tbody>

    </table>

  </div>

  <script src="./static/js/axios.min.js"></script>
  <script>

    const url = "http://localhost:5666"

    function add() {
      let blogName = document.querySelector('#blogName').value
      let blogAddress = document.querySelector('#blogAddress').value

      let blog = {
        "name": blogName,
        "address": blogAddress
      }

      axios.post(`${url}/blog`, blog).then((res) => {
        console.log(res);
        location.href = './List.html'
      })
    }

    function cancel() {
      if (confirm("确认返回列表页吗")) {
        location.href = './List.html'
      }
    }

  </script>
</body>

</html>